<template>
    <div class="breadCrumb">
        <router-link :to="{ name: item.name }" key="item.name" v-for="item in data">{{ item.meta.name + separator }}
        </router-link>
    </div>
</template>
<script setup>
import { watchEffect, watch, toRefs } from "vue"
//Vue3.2以后defineEmits def ineProps不再需要引入了,已经在全局了
//声明props
let props = defineProps({
    data: {
        type: Array,
        default() {
            return []
        }
    },
    separator: {
        type: String,
        default() {
            return "/"
        }
    },

})
//1.reactive 直接重新赋值是否解除响应式

//2.是否没有使用watch侦听p rops的变化

//3.是否watchEffect不管用

watchEffect(() => {
    console.log(props.data);
})
// watch(() => props.data, (newVal) => {
//     console.log('new', newVal);
// })

//结构props
let { data, separator } = toRefs(props)

</script>
<style scoped>
.breadCrumb {
    border: 1px solid #ccc;
    margin: 0 10px;
}

.breadCrumb a {
    font-size: 16px;
    font-weight: 700;
    color: black;
    margin: 0 5px;
}
</style>